<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1>未登录用户</h1>
      </div>
      <!--  未登录 -->
      <el-form
        :rules="unLoginRules"
        label-position="left"
        label-width="100px"
        :model="unLogin"
        ref="unLoginForm"
      >
        <!-- 未登录内容-->
        <el-form-item prop="content" label="推荐内容">
          <el-select v-model="unLogin.content" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in unLogin.ContentSelect"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 未登录数量 -->
        <el-form-item label="数量" prop="num">
          <el-input
            style="width: 220px"
            placeholder="请输入数量"
            v-model.number="unLogin.num"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <br />

    <!-- 登录 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1>登录用户</h1>
      </div>

      <el-form
        label-position="left"
        label-width="100px"
        ref="LoginForm"
        :rules="LoginRules"
        :model="Login"
      >
        <el-form-item prop="content" label="推荐内容">
          <el-select v-model="Login.content" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in Login.ContentSelect"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input
            placeholder="请输入数量"
            style="width: 220px"
            v-model.number="Login.num"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <br />

    <br />
    <el-button
      type="primary"
      v-hasPermi="['base:config:editIndex']"
      @click="saveFn"
      >保存</el-button
    >
  </div>
</template>

<script>
import {
  getConfigListApi,
  getConfigEditApi,
} from "@/wss/api/systemManagement/recommend/index.js";
export default {
  data() {
    return {
      // // 未登录数据
      // unloginData: {
      //   content: {
      //     type: "i_anonymous_content",
      //     name: "推荐内容",
      //     value: "",
      //   },
      //   num: { type: "i_anonymous_num", name: "数量", value: "" },
      // },
      // // 登录数据
      // loginData: {
      //   content: {
      //     type: "i_user_content",
      //     name: "推荐内容",
      //     value: "",
      //   },

      //   num: { type: "i_user_num", name: "数量", value: "" },
      // },
      params: [],
      reader: {
        content: "",
        digital: "",
        ContentSelect: [],
        numSelect: [],
      },
      // 以下是区分登录与未登录
      // 已登录
      Login: {
        content: "",
        num: "",
        ContentSelect: [
          { name: "系统最新内容", value: "1" },
          { name: "关注标签最新内容", value: "2" },
        ],
      },
      LoginRules: {
        num: [
          {
            required: true,
            message: "无效",
            trigger: "blur",
            type: "number",
          },
        ],
        content: [
          {
            required: true,
            message: "请选择推荐内容",
            trigger: "blur",
          },
        ],
      },
      unLoginRules: {
        num: [
          {
            required: true,
            message: "无效",
            trigger: "blur",
            type: "number",
          },
        ],
        content: [
          {
            required: true,
            message: "请选择推荐内容",
            trigger: "change",
          },
        ],
      },
      // 未登录
      unLogin: {
        num: "",
        content: "",
        ContentSelect: [
          { name: "系统最新内容", value: "1" },
          { name: "关注标签最新内容", value: "2" },
        ],
      },
    };
  },
  created() {
    this.getConfigListFn();
  },
  methods: {
    handleSelect() {},
    async getConfigListFn() {
      let { rows } = await getConfigListApi();
      // 回显数据
      rows.forEach((item) => {
        // “i_user_content”;//登录用户推荐内容
        if (item.type == "i_user_content") {
          this.Login.content = item.value;
        }
        // “i_user_num”;//登录用户推荐数量
        if (item.type == "i_user_num") {
          this.Login.num = item.value;
        }
        // “i_anonymous_content”;//未登录用户推荐内容
        if (item.type == "i_anonymous_content") {
          this.unLogin.content = item.value;
        }
        // “i_anonymous_num”;//未登录用户推荐数量
        if (item.type == "i_anonymous_num") {
          this.unLogin.num = item.value;
        }
      });
      this.params = rows;
      // 以下用于动态生成且区分登录和未登录
      // rows.forEach((item) => {
      //   // 0是登录 1是不登录

      //   //登录
      //   if (item.type == "i_user_content") {
      //     //是登录且是content
      //     this.Login.ContentSelect.push(item);
      //   } else if (item.type == "i_user_num") {
      //     //是登录且是num
      //     this.Login.numSelect.push(item);
      //   }
      //   // 未登录

      //   // 未登录且是content
      //   if (item.type == "i_anonymous_content") {
      //     this.unLogin.ContentSelect.push(item);
      //     // 未登录且是num
      //   } else if (item.type == "i_anonymous_num") {
      //     this.unLogin.numSelect.push(item);
      //   }
      // });
      console.log({ Login: this.Login, unLogin: this.unLogin });
    },
    // 保存
    async saveFn() {
      try {
        // console.log(this.$refs, "返回数据");
        await this.$refs.LoginForm.validate();
        await this.$refs.unLoginForm.validate();
        // 传递给后端的数据
        this.params.forEach((item) => {
          // “i_user_content”;//登录用户推荐内容
          if (item.type == "i_user_content") {
            item.value = this.Login.content;
            item.id = item.idStr;
          }
          // “i_user_num”;//登录用户推荐数量
          if (item.type == "i_user_num") {
            item.value = this.Login.num;
            item.id = item.idStr;
          }
          // “i_anonymous_content”;//未登录用户推荐内容
          if (item.type == "i_anonymous_content") {
            item.value = this.unLogin.content;
            item.id = item.idStr;
          }
          // “i_anonymous_num”;//未登录用户推荐数量
          if (item.type == "i_anonymous_num") {
            item.value = this.unLogin.num;
            item.id = item.idStr;
          }
        });

        let { msg, code } = await getConfigEditApi(this.params);
        if (code === 200) {
          this.$message({
            type: "success",
            message: msg,
          });
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: "输入出了点小问题哦",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f5f5f5;
  height: calc(100vw - 100px);
}

.el-card .box-card is-always-shadow {
  box-shadow: unset;
}
</style>